<template>
  <div class="find">
    <van-nav-bar title="发现" />
    <!-- 面试技巧 -->
    <div class="item">
      <van-cell>
        <template #title>
          <div class="title">
            面试技巧
          </div>
        </template>
        <template #default>
          <div @click="lookMore">查看更多<van-icon name="arrow" /></div>
        </template>
      </van-cell>
      <skillart
        v-for="(item, index) in technicListCurrent"
        :key="index"
        :item="item"
      ></skillart>
    </div>
    <!-- 市场数据 -->
    <div class="item marketdata">
      <van-cell>
        <template #title>
          <div class="title">市场数据</div>
        </template>
        <template #default>
          <div @click="charmore">查看更多<van-icon name="arrow" /></div>
        </template>
      </van-cell>
      <div class="info">
        <span>{{ city }}</span>
        <span>{{ position }}</span>
      </div>
      <!-- 进度条部分 -->
      <div class="progress">
        <div
          class="proitem"
          v-for="(item, index) in yearsalarylist"
          :key="index"
        >
          <span>{{ item.year }}</span>
          <van-progress
            class="proline"
            :percentage="(item.salary * 100) / maxSalary"
            stroke-width="12"
            color="#fe6d67"
            :pivot-text="item.salary"
            pivot-color="#fe6d67"
          />
          <span
            class="iconfont arrow"
            :class="item.percent >= 0 ? 'green' : 'red'"
            >{{ item.percent >= 0 ? '&#xe651;' : '&#xe64e;' }}</span
          >
          <span>{{ item.percent }}%</span>
        </div>
        <div class="spread" @click="toggleSpread">
          <div v-if="!isSpread">展开更多<van-icon name="arrow-down" /></div>
          <div v-else>收起显示<van-icon name="arrow-up" /></div>
        </div>
      </div>
    </div>
    <!-- 面经分享 -->
    <div class="item">
      <van-cell>
        <template #title>
          <div class="title">
            面经分享
          </div>
        </template>
        <template #default>
          <div @click="sharemore">查看更多<van-icon name="arrow" /></div>
        </template>
      </van-cell>
      <sharecom
        v-for="(item, index) in shareArtList"
        :key="index"
        :item="item"
      ></sharecom>
    </div>
  </div>
</template>

<script>
import skillart from './com/skillart.vue'
import { articlesTechnic, topChartData, articlesShare } from '@/api/api.js'
import sharecom from './com/sharecom.vue'

export default {
  components: {
    skillart,
    sharecom
  },
  data () {
    return {
      technicList: [],
      technicListCurrent: [],
      city: '',
      position: '',
      yearsalarylist: [],
      maxSalary: '',
      isSpread: false,
      newArray: [],
      // 面经
      shareArtList: []
    }
  },
  created () {
    this.getArtTech()
    this.chartHot()
    this.getShareArt()
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
  },
  methods: {
    // 面经分享文章三条
    async getShareArt () {
      const res = await articlesShare({ limit: 3 })
      this.shareArtList = res.data.data.list
    },

    // 更多面经分享
    sharemore () {
      this.$router.push('/shareList')
    },
    // 市场数据查看更多
    charmore () {
      this.$router.push('/chart')
    },
    // 切换展开更多
    toggleSpread () {
      this.isSpread = !this.isSpread
      this.chartHot()
    },
    // 市场数据----热门数据
    async chartHot () {
      const res = await topChartData()
      this.city = res.data.data.city
      this.position = res.data.data.position
      if (!this.isSpread) {
        this.yearsalarylist = res.data.data.yearSalary.slice(0, 3).reverse()
      } else {
        this.yearsalarylist = res.data.data.yearSalary.reverse()
      }
      const salList = this.yearsalarylist.map(item => {
        return item.salary.toString()
      })
      this.maxSalary = Math.max.apply(Math, salList)
    },
    // 查看更多
    lookMore () {
      this.$router.push('/experienceAdd')
    },
    // 面试技巧列表
    async getArtTech () {
      const res = await articlesTechnic({})
      this.technicList = res.data.data.list
      this.technicListCurrent = this.technicList.slice(0, 3)
    }
  }
}
</script>

<style lang="less" scoped>
.find {
  /deep/.van-nav-bar__title {
    font-size: 18px;
  }
  .title {
    font-size: 16px;
    color: black;
  }
  .item {
    border-bottom: 10px solid #f9f9f9;
  }
  .marketdata {
    .info {
      span {
        padding: 6px;
        background-color: #eceaea;
        margin-left: 14px;
        font-size: 12px;
        border-radius: 3px;
      }
    }
  }
  .progress {
    padding: 0 14px;
    line-height: 14px;
    .proitem {
      display: flex;
      align-items: center;
      margin: 20px 0;
      span {
        font-size: 12px;
        margin-right: 8px;
      }
      .arrow {
        margin-left: 10px;
      }
      .proline {
        width: 60%;
        margin-top: -7px;
      }
    }
    /deep/.van-progress__pivot {
      height: 10px;
      line-height: 11px;
    }
  }
  .green {
    color: #60d183;
  }
  .red {
    color: #fe6d67;
  }
  .spread {
    text-align: center;
    font-size: 12px;
    padding: 3px 0 14px 0;
  }
}
</style>
